<template>
    <el-form label-width="auto" :model="operInfo" style="max-width: 600px">
        <el-form-item label="账号">
            <el-input v-model="operInfo.adminname" class="myInput" />
        </el-form-item>
        <el-form-item label="密码" >
            <el-input type="password" v-model="operInfo.password" :disabled="true"/>
        </el-form-item>
        <el-form-item label="角色">
            <el-select v-model="operInfo.role">
                <el-option :value="1" label="超级管理员"></el-option>
                <el-option :value="2" label="轮播图维护人员"></el-option>
                <el-option :value="3" label="商品维护人员"></el-option>
                <el-option :value="4" label="售后人员"></el-option>
            </el-select>
        </el-form-item>
        <el-tree ref="treeRef" style="max-width: 600px" :data="data" show-checkbox default-expand-all node-key="id"
            highlight-current :props="defaultProps" />
        <el-button type="primary" @click="geteditOperApi">修改</el-button>
        <el-button type="primary" @click="cencelfn">取消</el-button>
    </el-form>
</template>

<script setup lang="ts">
import type { IOper } from "@/myTypes"
import { reactive, defineProps } from "vue"
import { editOperApi, getOperDetailApi } from "@/api/oper"
import { watch, ref } from "vue";
import { ElMessage, ElTree } from 'element-plus'
import type { TreeKey } from "element-plus";
import data from "./menuData"

const treeRef = ref<InstanceType<typeof ElTree>>();

// 声明属性
const props = defineProps<{
    adminname: string
}>()



const operInfo = reactive<IOper>({
    adminname: "",
    password: "",
    role: 1,
    checkedKeys: []
});
// 声明事件
const emit = defineEmits<{
    (e: "closeWin", isReade: boolean): void
}>()

// 获取当前人员的信息
async function getoperedit() {
    const res = await getOperDetailApi(props.adminname);
    if (res.data.code === "200") {
        const { adminname, role, checkedKeys } = res.data.data[0];
        operInfo.adminname = adminname;
        operInfo.role = role;
        // console.log("checkedKeys", checkedKeys);
        operInfo.checkedKeys = checkedKeys;
        treeRef.value!.setCheckedKeys(operInfo.checkedKeys as Array<TreeKey>, false);
    }
}
watch(props, () => getoperedit(), { immediate: true });

// 修改操作人员
// editOperApi·
const geteditOperApi = () => {
    operInfo.checkedKeys = treeRef.value!.getCheckedKeys(false);
    editOperApi(operInfo)
        .then(res => {
            if (res.data.code === "200") {
                ElMessage.success("修改成功！");
                // operInfo.adminname=""
                operInfo.password = ""
                // operInfo.role=""
                emit("closeWin", true);
            }
        })
}

// 取消：
const cencelfn = () => {
    emit("closeWin", false);
}
</script>

<style scoped></style>